<template>
  <div class="app-container">
    <div style="background-color: white; border-radius: 10px; height: 100px;margin-left: 10px;text-align: center;padding-top: 30px">
    <!-- 多条件分页查询所需条件的form -->
    <el-form :inline="true"  :model="lineDto" class="demo-form-inline">
      <el-form-item label="线路编号">
        <el-input ref="inputRef1" v-model="lineDto.line_number" placeholder="输入线路编号"></el-input>
      </el-form-item>
      <el-form-item label="线路名称">
        <el-input ref="inputRef" v-model="lineDto.name" placeholder="输入线路名称"></el-input>
      </el-form-item>
      <el-form-item label="线路类型">
        <el-select  v-model="lineDto.transport_line_type_id" placeholder="请选择线路类型">
          <el-option label="请选择线路类型" value=""></el-option>
          <el-option v-for="item in line_type" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetValues">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    <!-- end -->

    <div style="background-color: white;margin-top: 10px; margin-bottom: 20px;margin-left: 10px;border-radius: 10px;">

    <!-- 添加线路按钮 -->
    <el-button type="primary" @click="dataOperation(0,'add')" style="margin-left: 30px;margin-top: 30px">+新增线路</el-button>
    <!-- end -->

      <div style="height: 20px"></div>

    <!-- table 用于展示线路建议信息 -->
    <el-table
      v-if="lineShow"
      v-loading="linelistLoading"
      :data="linelist"
      style="width: 100%"
      :max-height="600"
    >
      <el-table-column fixed prop="code" label="线路编号">
        <template slot-scope="scope">
          {{ scope.row.line_number }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="线路名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="线路类型">
        <template slot-scope="scope">
          {{ scope.row.typeName }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="起始机构">
        <template slot-scope="scope">
          {{ scope.row.start_agency }}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="终点机构">
        <template slot-scope="scope">
          {{ scope.row.end_agency }}
        </template>
      </el-table-column>
      <el-table-column prop="attention" label="距离(千米)">
        <template slot-scope="scope">
          {{ scope.row.distance }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="成本(元)">
        <template slot-scope="scope">
          {{ scope.row.cost }}
        </template>
      </el-table-column>
      <el-table-column prop="tctName" label="预计时间">
        <template slot-scope="scope">
          {{ scope.row.estimated_time }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? "启用" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="dataOperation(scope.row.id,'update',null,scope.row.line_number)" type="text" size="small">编辑</el-button>
          <el-button v-if="scope.row.status === 1" @click.native.prevent="open(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button @click.native.prevent="dataOperation(scope.row.id,'addTruckNum',scope.row.name,null)" type="text" size="small">添加车次</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- end --->

    <div style="height: 50px;margin-bottom: 10px">
    <!-- 分页组件 -->
      <el-pagination
        background
        @current-change="change"
        @size-change="pageSizeChange"
        :current-page="linePageNumber"
        :page-sizes="[10, 20, 40, 80]"
        :total="lineTotal"
        layout="total, prev, pager, next, sizes,jumper"
        style="text-align: center; font-size: 8px; margin-top: 15px"
      >
    </el-pagination>
    <!-- end -->
    </div>
    </div>

    <!-- 抽屉 -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      size="50%"
      direction="ttb"
      :before-close="handleClose"
      style="position: fixed; top: 65%; left: 52%; transform: translate(-50%, -50%); width: 50%; max-width: 1200px;height: 930px;border-radius: 10px;"
    >
      <div v-if="line_show">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="线路编号" style="width: 285px">
                <el-input type="text" v-model="form.line_number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="线路名称" style="width: 285px">
                <el-input type="text" v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="起点机构"  style="width: 285px;">
                <el-select v-model="form.start_agency_id" placeholder="请选择">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option v-for="item in agencyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="终点机构"  style="width: 285px;">
                <el-select v-model="form.end_agency_id" placeholder="请选择">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option v-for="item in agencyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="12">
              <el-form-item label="距离"  style="width: 285px;">
                <el-input type="text" v-model="form.distance">
                  <template v-slot:append>千米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="线路类型"  style="width: 285px;">
                <el-select v-model="form.transport_line_type_id" placeholder="请选择">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option v-for="item in line_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="预计时间"  style="width: 285px;">
                <el-input type="text" v-model="form.estimated_time"></el-input>
                <template v-slot:append>分钟</template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态"  style="width: 285px;">
                <el-select v-model="form.status" placeholder="请选择">
                  <el-option label="禁用" :value="0"></el-option>
                  <el-option label="正常" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="成本"  style="width: 285px;">
                <el-input type="text" v-model="form.cost">
                  <template v-slot:append>元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>


      <div v-if="truck_number_show">
        <el-form ref="form" :model="truck_num_bean" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="线路名称" style="width: 285px">
                <el-input type="text" v-model="lineName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车次名称" style="width: 285px">
                <el-input type="text" v-model="truck_num_bean.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="发车时间" style="width: 285px">
                <el-select v-model="truck_num_bean.departure_time" placeholder="请选择">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option label="07:00" value="07:00"></el-option>
                  <el-option label="07:30" value="07:30"></el-option>
                  <el-option label="08:00" value="08:00"></el-option>
                  <el-option label="08:30" value="08:30"></el-option>
                  <el-option label="09:00" value="09:00"></el-option>
                  <el-option label="09:30" value="09:30"></el-option>
                  <el-option label="10:00" value="10:00"></el-option>
                  <el-option label="10:30" value="10:30"></el-option>
                  <el-option label="11:00" value="11:00"></el-option>
                  <el-option label="11:30" value="11:30"></el-option>
                  <el-option label="12:00" value="12:00"></el-option>
                  <el-option label="12:30" value="12:30"></el-option>
                  <el-option label="13:00" value="13:00"></el-option>
                  <el-option label="13:30" value="13:30"></el-option>
                  <el-option label="14:00" value="14:00"></el-option>
                  <el-option label="14:30" value="14:30"></el-option>
                  <el-option label="15:00" value="15:00"></el-option>
                  <el-option label="15:30" value="15:30"></el-option>
                  <el-option label="16:00" value="16:00"></el-option>
                  <el-option label="16:30" value="16:30"></el-option>
                  <el-option label="17:00" value="17:00"></el-option>
                  <el-option label="17:30" value="17:30"></el-option>
                  <el-option label="18:00" value="18:00"></el-option>
                  <el-option label="18:30" value="18:30"></el-option>
                  <el-option label="19:00" value="19:00"></el-option>
                  <el-option label="19:30" value="19:30"></el-option>
                  <el-option label="20:00" value="20:00"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="周期" style="width: 285px">
                <el-select v-model="truck_num_bean.period" placeholder="请选择">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option label="天" :value="1"></el-option>
                  <el-option label="周" :value="2"></el-option>
                  <el-option label="月" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>

      <div style="position: absolute; bottom: 30px; right: 40px;" v-if="line_show">
        <el-button type="primary" @click="agree(title)">确认</el-button>
        <el-button>取消</el-button>
      </div>

      <div style="position: absolute; bottom: 30px; right: 40px;" v-if="truck_number_show">
        <el-button type="primary" @click="agree('addTruckNum')">确认</el-button>
        <el-button>取消</el-button>
      </div>
    </el-drawer>
    <!-- end -->
  </div>
</template>

<script>
import { getLineByPage,addLine,deleteLine,updateLine,getLineById} from '@/api/line/line_manage'
import { getAllLineType  } from "@/api/line/line_type";
import { queryCoreall } from '@/api/core_org/core_org_manage'
import { addTruckNum } from "@/api/truck_num/truck_num_manage";
import user from '@//store/modules/user'

export default {
  data(){
    return {
      line_number:null,
      lineName:null,
      truck_num_bean:{
        id: null,
        name: null,
        departure_time: null,
        transport_line_id: null,
        period: null,
        status: 1
      },
      line_show:true,
      truck_number_show:false,
      line_type:[],
      logo: 'add',
      lineShow:true,
      selectShow:false,
      form: {
        id: null,
        name: null,
        line_number: null,
        agency_id: null,
        transport_line_type_id: null,
        start_agency_id: null,
        end_agency_id: null,
        distance: null,
        cost: null,
        estimated_time: null,
        status: 1
      },
      title:'添加',
      drawer: false,
      lineDto:{
        line_number:null,
        name:null,
        transport_line_type_id:null
      },
      linelist: null,
      linelistLoading: true,
      linePageNumber: 1,
      linePageSize: 10,
      lineTotal: 0,
      agency_id:null,
      agencyList:[]
    }
  },
  created() {
    this.init()
  },
  methods:{
    //调用多条件分页查询
    query(){
      this.linePageNumber = 1;
      this.init()
    },
    //多条件分页查询
    init(){
      this.queryType()
      this.linelistLoading = true

      const lineDto = {
        pageNum: this.linePageNumber,
        pageSize: this.linePageSize,
        line_number:this.lineDto.line_number,
        name:this.lineDto.name,
        transport_line_type_id:this.lineDto.transport_line_type_id,
        agency_id: user.state.id
      }

      console.log(lineDto)

      getLineByPage(lineDto).then(response=>{
        this.linelist = response.data[0].list
        this.agency_id = response.data[1].agency_id
        this.linelistLoading = false
        this.lineTotal = response.data[0].total
        console.log(this.lineTotal)
        this.lineShow = true
      })
    },
    //查询所有线路类型和所有组织信息
    queryType(){
      getAllLineType().then(response=>{
        this.line_type = response.data
      })
      queryCoreall().then(response=>{
        this.agencyList = response
      })

    },
    //上下页
    change(val){
      this.linePageNumber = val;

      this.init();
    },
    //分页查询
    pageSizeChange(newPageSize) {
      this.linePageSize = newPageSize;

      this.init()
    },
    //判断操作类型
    dataOperation(id,logo,lineName,line_number) {
      this.form.line_number = line_number
      this.lineName = lineName
      this.drawer = true
      if(logo==='add'){
        this.line_show = true
        this.title = '添加线路'
      }else if (logo==='update'){
        this.title = '修改线路'
        this.selectShow = true
        this.logo = 'update'
        this.queryById(id)
      }else {
        this.truck_num_bean.transport_line_id = id
        this.title = '添加车次'
        this.line_show = false
        this.truck_number_show = true
      }
    },
    //数据的添加和修改
    agree(logo){
      if(logo==='添加线路'){
        this.saveLine()
      }else if (logo==='修改线路'){
        this.modify()
      }else{
        this.saveTruck()
      }
    },
    saveTruck(){
      addTruckNum(this.truck_num_bean).then(response=>{
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.drawer = false
          this.truck_num_bean= {
            id: null,
            name: null,
            departure_time: null,
            transport_line_id: null,
            period: null,
            status: null
          }
        } else {
          this.$message.error(response.message);
        }
      })
    },
    //重置分页查询条件
    resetValues() {
      this.$refs.inputRef.clear(); // 清空输入框的值
      this.$refs.inputRef1.clear(); // 清空输入框的值
      this.lineDto.transport_line_type_id='' // 清空下拉列表框的选中项
    },
    //关闭模态框,
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.form= {
            id: null,
              name: null,
              line_number: null,
              agency_id: null,
              transport_line_type_id: null,
              start_agency_id: null,
              end_agency_id: null,
              distance: null,
              cost: null,
              estimated_time: null,
              status: null
          }
          this.line_show = true
          this.truck_number_show = false
          done();
        })
        .catch(_ => {});
    },
    //添加线路信息
    saveLine(){
      this.form.agency_id = this.agency_id
      addLine(this.form).then(response=>{
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.init()
          this.drawer = false
          this.form= {
            id: null,
            name: null,
            line_number: null,
            agency_id: null,
            transport_line_type_id: null,
            start_agency_id: null,
            end_agency_id: null,
            distance: null,
            cost: null,
            estimated_time: null,
            status: null
          }
        } else {
          this.$message.error(response.message);
        }
      })

    },
    //根据线路编号查询线路信息
    queryById(id){
      getLineById(id).then(response=>{
        this.form=response.data
      })

    },
    //修改线路信息
    modify(){
      updateLine(this.form).then(response=>{
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.init()
          this.drawer = false
          this.form= {
            id: null,
            name: null,
            line_number: null,
            agency_id: null,
            transport_line_type_id: null,
            start_agency_id: null,
            end_agency_id: null,
            distance: null,
            cost: null,
            estimated_time: null,
            status: null
          }
        } else {
          this.$message.error(response.message);
        }
      })
    },
    //删除线路信息
    excise(te_id){
      const lineBean = {
        id: te_id,
        status:0
      }
      deleteLine(lineBean).then(response=>{
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.init()
        } else {
          this.$message.error(response.message);
        }
      })
    },
    //删除信息的弹出框
    open(id) {
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '你确定要删除这条线路建议吗? '),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.excise(id)
            done()
          } else {
            done();
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .app-container{
   width: 100%;
   height: 908px;
   background-color: #f1f1f1; /* 设置背景颜色 */
}
</style>
